<template>
  <div class="user-container">
    <div class="touxiang"
    >
      <!--未登录时头像-->
      <div class="user-login"
       v-if="logging"
       @click="toLogin"
       v-on:mouseenter="logMoveIn"
       v-on:mouseleave="logmouseOut"
      >
      <span>
        <i class="el-icon-user"></i>
      </span>
      </div>
      <!--登录后头像-->
      <div class="user-logged"
       v-if="logged"
       v-on:mouseover="loggedMoveIn"
       v-on:mouseleave="loggedMoveOut"
      >
      <span>
        <i class="el-icon-user-solid"></i>
      </span>
      </div>
    </div>
    <!--登录-->
    <div class="log-form" v-if="isloginShow">
      <div class="log-form-top">
        <div class="log-form-top-options">
          <span class="log-1">登录</span>
          <span class="log-2">没有账号?</span>
          <span class="log-3" @click="toRegistor">点此注册</span>
        </div>
        <i class="el-icon-close" @click="closeLogin"></i>
      </div>
      <div class="log-form-bottom">
        <el-form :model="loginForm" :rules="LoginRules" ref="loginForm" class="log-form-item">
          <el-form-item label="用户名" prop="username" class="log-form-bottom-item">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password"  class="log-form-bottom-item">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-button type="primary" @click="login('ruleForm')">登录</el-button>
        </el-form>
      </div>
    </div>
    <!--注册-->
    <div class="log-form" v-if="isRegistorShow">
      <div class="log-form-top">
        <div class="log-form-top-options">
          <span class="log-1">注册</span>
          <span class="log-2">已有账号?</span>
          <span class="log-3" @click="toLogin">点击登录</span>
        </div>
        <i class="el-icon-close" @click="closeRegistor"></i>
      </div>
      <div class="log-form-bottom">
        <el-form :model="registorForm" :rules="RegistorRules" ref="registorForm" class="log-form-item">
          <el-form-item label="用户名" prop="username" class="log-form-bottom-item">
            <el-input v-model="registorForm.username" placeholder="用户名为2-6位字符"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password"  class="log-form-bottom-item">
            <el-input v-model="registorForm.password" type="password" placeholder="密码为6-15位字符"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password_again"  class="log-form-bottom-item">
            <el-input v-model="registorForm.password_again" type="password" placeholder="请确认密码"></el-input>
          </el-form-item>
          <el-button type="primary" @click="register('ruleForm')">注册</el-button>
        </el-form>
      </div>
    </div>
    <!--请登录-->
    <div class="not-login"
     v-if="noLogged"
     v-on:mouseenter="noLogMoneIn"
     v-on:mouseleave="noLogMoneOut"
    >
      <span @click="toLogin">
        去登录
      </span>
    </div>
    <!--已登录-->
    <div class="already-logged-in"
         v-if="hasLogged"
         v-on:mouseenter="alreadyIn"
         v-on:mouseleave="alreadyOut"
    >
      <span class="already-logged-in-t">
        您好! {{$store.state.userInfo.username}}
      </span>
      <span class="already-logged-in-b" @click="logout" >
        退出登录
      </span>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { login,register } from "@/api";
import axios from "axios";
import {mapMutations, mapState} from "vuex";
export default {
  data(){
    var Pass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registorForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return{
      logging:true,//未登录
      logged:false,//已登录
      isloginShow:false,//登录表单
      isRegistorShow:false,//注册表单
      loginForm:{
        password:'',
        username:'',
      },
      LoginRules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max:6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
      },
      registorForm:{
        password:'',
        username:'',
        password_again:'',
      },
      RegistorRules:{
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max:6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        password_again:[
          { validator: Pass2, trigger: 'blur',required: true }
        ],
      },
      noLogged:false,
      hasLogged:false,
      dialogVisible:false,
    }
  },
  mounted() {
    const t = JSON.parse(localStorage.getItem('memory'))
    if(this.$store.state.token!==''&& t.token ){
      this.$store.state.token = t.token
      this.logged = true
      this.logging = false
    } else if (this.$store.state.token === ''&& t){
      this.logged = true
      this.logging = false
    } else if (this.$store.state.token !== ''&& t ){
      localStorage.setItem('token','')
      this.logged = true
      this.logging = false
    }
  },
  methods:{
    ...mapMutations(['updateToken','updateUserInfo']),
    toLogin(){
      this.isloginShow = true
      this.isRegistorShow = false
    },
    closeLogin(){
      this.isloginShow = false
    },
    toRegistor(){
      this.isloginShow = false
      this.isRegistorShow = true
    },
    closeRegistor(){
      this.isRegistorShow = false
    },
    //登录
    login(){
      const user = this.loginForm
      this.$refs.loginForm.validate(async valid=>{
        if(!valid){
          return false
        }
        // 验证通过后发起请求
        const {data:res} = await login(user)
        if(res.code == 200) {
          //用户信息
          const info = {
            id:res.data.id,
            username:res.data.username,
          }
          this.isLogged()
          this.updateToken(res.data.token)
          this.updateUserInfo(info)
        }
      })
    },
    //注册
    register(){
      const user = this.registorForm
      this.$refs.registorForm.validate(async valid=>{
        if(!valid){
          return false
        }
        // 验证通过后发起请求
        const {data:res} = await register(user)
        if(res.code == 200){
          this.sendMessage('注册成功!')
          this.isRegistorShow = false
          this.isloginShow = true
        }
      })
    },
    isLogged(){
      //登录成功后
      this.isloginShow = false
      this.logged = true
      this.logging = false
      this.sendMessage('登陆成功!','success')
    },
    //消息弹框
    sendMessage(msg,type) {
      this.$notify({
        title: msg,
        position: 'top-right',
        type: type,
        offset: 200
      });
    },
    //鼠标经过未登录的头像
    logMoveIn(){
      this.noLogged = true
    },
    //鼠标移出未登录的头像
    logmouseOut(){
      // this.noLogged = false
    },
    //鼠标经过未登录user框
    noLogMoneIn(){
      this.noLogged = true
    },
    //鼠标离开未登录user框
    noLogMoneOut(){
      this.noLogged = false
    },
    //鼠标经过已登录的头像
    loggedMoveIn(){
      this.hasLogged = true
    },
    //鼠标离开已登录的头像
    loggedMoveOut(){
      // this.hasLogged = false
    },
    //鼠标经过已登录user框
    alreadyIn(){
      this.hasLogged = true
    },
    //鼠标移出已登录user框
    alreadyOut(){
      this.hasLogged = false
    },
    //退出登录
    logout(){
      let res = confirm('确认退出?')

      if(res) {
        this.$store.state.token = ''
        this.$store.state.userInfo = {}
        this.logging = true
        this.logged = false
        localStorage.removeItem('memory');
        this.dialogVisible = false
        this.sendMessage('操作成功! ','success')
        return
      } else {
        this.sendMessage('已取消','success')
      }
    },
  },
  computed:{
    ...mapState['token','userInfo']
  }
}

</script>


<style scoped lang="less">
  .user-container{
    z-index: 999;
    position: absolute;
    left: 92.5%;
    top: 4vh;
      .user-login{
        height: 9vh;
        width: 11vh;
      }
    .user-logged{
      height: 9vh;
      width: 10vh;
    }
    .el-icon-user{
     height: 5vh;
     width: 5vh;
     color: #60cdad;
     font-size: 3vh;
     border-radius: 50%;
     border: 2px solid rgba(242,240,240,.5);
     line-height: 5vh;
     cursor: pointer;
     &:hover{
       border-radius: 50%;
       border: 2px solid rgba(242,240,240,1);
     }
   }
    //头像部分
    .el-icon-user-solid{
      height: 5vh;
      width: 5vh;
      color: #60cdad;
      font-size: 3vh;
      border-radius: 50%;
      border: 2px solid rgba(242,240,240,.5);
      line-height: 5vh;
      cursor: pointer;
      &:hover{
        border-radius: 50%;
        border: 2px solid rgba(242,240,240,1);
      }
    }
    //表单
    .log-form{
      position: absolute;
      left: -53vw;
      top: 23vh;
      border: 2px solid #60cdad;
      height: auto;
      width: 22vw;
      background-color: rgba(242,240,240,.9);
      padding: 0px 2vh;
      box-sizing: border-box;
      padding-bottom: 2vh;
      .log-form-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1vh;
        padding:  4vh 0 1.5vh 0;
        border-bottom: 1px solid black;
        margin-bottom: 1.5vh;
        .log-form-top-options{
          .log-1{
            font-size: 2.4vh;
            margin-right: 0.5vh;
          }
          .log-2{
            font-size: 1.4vh;
            margin-right: 0.5vh;
          }
          .log-3{
            font-size: 1.4vh;
            color: blue;
            text-decoration: underline;
            cursor: pointer;
            &:hover{
              color: darkblue;
            }
          }
        }
        .el-icon-close{
          cursor: pointer;
        }
      }
      .log-form-bottom{
        .log-form-bottom-item{
          margin-bottom: 3vh;
          /deep/ .el-form-item__label{
            line-height: 3vh;
          }
          /deep/ .el-input__inner{
            height: 4.5vh !important;
          }
          /deep/ .el-button{
            margin-top: 1.5vh;
            height: 4vh;
            line-height: 0;
          }
          /deep/ .el-button--primary{
            //margin-top: 2vh !important;
          }
        }
      }
    }
    //悬停未登录的头像
    .not-login{
      position: absolute;
      left: -1vw;
      top: 8vh;
      height: 6vh;
      width: 7vw;
      color: gray;
      background-color: rgba(255, 255, 255, 0.8);
      font-size: 1.7vh;
      line-height: 6vh;
      border-radius: 20px;
      cursor: pointer;
      letter-spacing: 1px;
      border: 2px solid #60cdad;
    }
    //悬停已登录的头像
    .already-logged-in{
      position: absolute;
      top: 8vh;
      left: -1vw;
      display: flex;
      flex-direction: column;
      height: 12vh;
      width: 7vw;
      background-color: white;
      border-radius: 10px;
      border: 2px solid #60cdad;
      padding-top: 1.5vh;
      box-sizing: border-box;
      .already-logged-in-t{
        letter-spacing: 1px;
        height: 60%;
        flex-wrap: wrap;
        word-wrap: anywhere;
      }
      .already-logged-in-b{
        text-decoration: underline;
        color: black;
        cursor: pointer;
        &:hover{
          color: #60cdad;
        }
      }
    }
  }
</style>